<template>
    <div class="common-layout">
    <h3>编辑商家资料</h3><br>
        <el-row el-row style="text-align:center">

            <el-col :span="12">
                <div class="block">
                    <el-avatar shape="square" :size="80" :src="shops_info.logo" />
                </div>
            </el-col>
        </el-row>

        <div style="text-align:center;">
            <p>店铺名称：<input type="text" v-model="shops_info.shops_name" placeholder="店铺名称"
                        style="width: 180px" @change="open"></p>
            <p>联系电话：<input type="text" v-model="shops_info.shops_mobile" placeholder="联系电话"
                        style="width: 180px" @change="open"></p>
            <p>商家标语：<input type="text" v-model="shops_info.shops_slogan" placeholder="商家标语"
                        style="width: 180px"  @change="open"></p>
            <p>店铺地址：<input type="text" v-model="shops_info.shops_address" placeholder="字符6~15个"
                        style="width: 180px"  @change="open"></p>
            <p>配 送 费：<input type="text" v-model="shops_info.sending_fee"  placeholder="配送金额5~30"
                        style="width: 180px"  @change="open"></p>
        </div>
    </div>

</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
// import type { Action } from 'element-plus'
import Axios from 'axios'
export default {
    data(){
        return{
            host:'http://127.0.0.1:8000/',
            // pk:'',  //接收商家id
            shops_info:[],
            // update_info:{
            //     'sending_fee':'',
            //     'shops_address':'',
            //     'shops_mobile':'',
            //     'shops_name':'',
            //     'shops_slogan':'',
            // },
            is_true:false,
            

        }
    },

    mounted(){
        // this.pk = this.$route.params.user_id
        console.log('这是路由传参',localStorage.getItem('token'))
        this.get_shops()

    },
    methods:{
        // 获取商家信息
        get_shops(){
            const pk = localStorage.getItem('id')
            // console.log('pk',pk)
            Axios.get(this.host + 'shops/query_shops/'+ pk +'/').then(resp=>{
                console.log('获取登录商家信息',resp)
                if(resp.data.code==200){
                    this.shops_info=resp.data.shops_list
                    console.log('接受赋值',this.shops_info)
                }
            }).catch(err=>{
                console.log('获取登录商家信息失败',err)
            })
        },

        // 修改商家信息
        open(){
            ElMessageBox.confirm('确定要修改吗？','修改提示',{
                distinguishCancelAndClose: true,
                confirmButtonText: '确定修改',
                cancelButtonText: '取消修改',
            }).then(() => {
                const upde_info={'shops_name':this.shops_info.shops_name,
                    'shops_mobile':this.shops_info.shops_mobile,
                    'shops_slogan':this.shops_info.shops_slogan,
                    'shops_address':this.shops_info.shops_address,
                    'sending_fee':this.shops_info.sending_fee}
                Axios.put(this.host + 'shops/query_shops/',upde_info,
                {headers:{'token':localStorage.getItem('token')}},
                ).then(resp=>{
                    console.log('修改商家信息的响应',resp)
                    if(resp.data.code==200){
                        ElMessage({
                            type: 'success',
                            message: resp.data.msg,
                        })                         
                    }else{
                        ElMessage({
                            type:'error',
                            message: resp.data.msg,
                        })
                    }
                   
                })
            }).catch(() => {

                })
        }

    },
}
</script>

<style>
.common-layout{
    /* height: 800px; */
    width: 450px;
}

</style>